import { ComponentProps, VueComponent } from "vue3-oop"
import { FormData,WidgetNode } from '../types'

import FdnGrid from './_grid/fdn-grid'
import FdnCard from './_card/fdn-card'
import FdnCollapse from "./_collapse/fdn-collapse"
import FdnInput from './input/fdn-input'
import FdnTextarea from './textarea/fdn-textarea'
import FdnNumber from './number/fdn-number'
import FdnRadio from './radio/fdn-radio'
import FdnCheckbox from './checkbox/fdn-checkbox'
import FdnSelect from './select/fdn-select'
import FdnTimepicker from './timepicker/fdn-timepicker'
import FdnTimerange from './timerange/fdn-timerange'
import FdnDatepicker from './datepicker/fdn-datepicker'
import FdnDaterange from './daterange/fdn-daterange'
import FdnImage from './image/fdn-image'
import FdnButton from './button/fdn-button'
import FdnDivider from './divider/fdn-divider'
import FdnSwitch from './switch/fdn-switch'
import FdnRate from './rate/fdn-rate'
import FdnSlider from './slider/fdn-slider'
import FdnUpload from './upload/fdn-upload'

interface IProps {
  formData: FormData,
  widgetNode: WidgetNode
}
export default class FdnWidget extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    formData: {},
    widgetNode:{}
  }

  constructor(
  ){
    super();
  }

  render() {
    const { formData,widgetNode } = this.props;
    const { widgetItem } = widgetNode;
    
    let formWidget = null;
    if(widgetItem){
      if(widgetItem.type==='GRID'){
        formWidget = <FdnGrid formData={formData} widgetNode={widgetNode} />
      }else if(widgetItem.type==='CARD'){
        formWidget = <FdnCard formData={formData} widgetNode={widgetNode} />
      }else if(widgetItem.type==='COLLAPSE'){
        formWidget = <FdnCollapse formData={formData} widgetNode={widgetNode} />
      }else if(widgetItem.type==='BUTTON'){
        formWidget = <FdnButton widgetNode={widgetNode} />
      }else if(widgetItem.type==='DIVIDER'){
        formWidget = <FdnDivider widgetNode={widgetNode} />
      }else if(widgetItem.type==='IMAGE'){
        formWidget = <FdnImage widgetNode={widgetNode} />
      }else{
        if(widgetItem.type==='INPUT'){
          formWidget = <FdnInput widgetNode={widgetNode} />
        }else if(widgetItem.type==='TEXTAREA'){
          formWidget = <FdnTextarea widgetNode={widgetNode} />
        }else if(widgetItem.type==='NUMBER'){
          formWidget = <FdnNumber widgetNode={widgetNode} />
        }else if(widgetItem.type==='RADIO'){
          formWidget = <FdnRadio widgetNode={widgetNode} />
        }else if(widgetItem.type==='CHECKBOX'){
          formWidget = <FdnCheckbox widgetNode={widgetNode} />
        }else if(widgetItem.type==='SELECT'){
          formWidget = <FdnSelect widgetNode={widgetNode} />
        }else if(widgetItem.type==='TIMEPICKER'){
          formWidget = <FdnTimepicker widgetNode={widgetNode} />
        }else if(widgetItem.type==='TIMERANGE'){
          formWidget = <FdnTimerange widgetNode={widgetNode} />
        }else if(widgetItem.type==='DATEPICKER'){
          formWidget = <FdnDatepicker widgetNode={widgetNode} />
        }else if(widgetItem.type==='DATERANGE'){
          formWidget = <FdnDaterange widgetNode={widgetNode} />
        }else if(widgetItem.type==='SWITCH'){
          formWidget = <FdnSwitch widgetNode={widgetNode} />
        }else if(widgetItem.type==='RATE'){
          formWidget = <FdnRate widgetNode={widgetNode} />
        }else if(widgetItem.type==='SLIDER'){
          formWidget = <FdnSlider widgetNode={widgetNode} />
        }else if(widgetItem.type==='UPLOAD'){
          formWidget = <FdnUpload widgetNode={widgetNode} />
        }
      }
    }
    return formWidget;
  }
}